/* 自定义左侧菜单样式 */
.ant-layout-sider {
    background-color: #fff!important;
    // 展开收起按钮
    .ant-pro-sider-collapsed-button {
        display: none;
    }
    .ant-layout-sider-children {
        padding-inline:0!important;
        .ant-pro-sider-menu{
            padding: 20px 16px 0;
        }
    }
}

.ant-menu {
    .ant-menu-item {
        margin: 0 0 10px;
        width: 100%;

        &:hover {
            color: #3A87FF !important;
            svg {
                path {
                    fill: #3A87FF;
                }
            }
        }
    }

    .ant-menu-item-selected {
        &:hover {
            color: #fff !important;

            svg {
                path {
                    fill: #fff;
                }
            }
        }

        svg {
            path {
                fill: #fff;
            }
        }
    }

    .ant-menu-item-active:active {
        background: #F5F7FE !important;
    }

    .ant-menu-submenu-title:active {
        background: #F5F7FE !important;
    }

    .ant-menu-title-content {
        transition: none !important;

        a {
            transition: none !important;
        }
    }

    .ant-menu-submenu-selected {
        background-color: #F5F7FE;

        .ant-menu-sub {
            background-color: #F5F7FE !important;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }
    }
}

.ant-menu-item {
    &.ant-menu-item-selected {
        background: linear-gradient(116deg, #52ACFF 0%, #3E89FF 100%);
        color: #fff;

        a:hover {
            color: #fff;
        }

        a:active {
            color: #fff;
        }
    }
}

.ant-menu-submenu {
    margin: 0 0 10px;

    .ant-menu-submenu-title {
        margin: 0;
        width: 100%;
    }

    .ant-menu-item {
        margin: 0;
        width: 100%;
    }

    &.ant-menu-submenu-selected {
        svg {
            path {
                fill: #3A87FF;
            }
        }
    }
}

.ant-menu-sub {
    padding-inline-start: 0px !important;

    .ant-menu-item {
        padding-left: 38px !important;
    }

    .ant-menu-item:hover {
        color: #3A87FF !important;

        svg {
            path {
                fill: #3A87FF;
            }
        }
    }

    .ant-menu-item-selected {
        background: linear-gradient(116deg, #52ACFF 0%, #3E89FF 100%);
        color: #fff;

        &:hover {
            color: #fff !important;
        }

        a:hover {
            color: #fff;
        }

        a:active {
            color: #fff;
        }
    }
}

// 按钮
.ant-btn-primary.ant-btn-dangerous {
    background: #EA4149;
}
/* 自定义内容 */
.ant-pro-layout-container {
    min-width: 1196px !important;
}

.ant-layout-content {
    min-height: calc(100vh - 64px) !important;
}

.ant-pro-page-container-warp-page-header {
    padding-block-start: 0px !important;
    padding-block-end: 0px !important;
    padding-inline-start: 0px !important;
    padding-inline-end: 0px !important;
    .ant-page-header-heading {
        display: none;
    }
    .ant-breadcrumb {
        padding-block-start: 0px !important;
        padding: 16px 20px !important;
        line-height: normal;

        a {
            color: #999;
            &:hover{
                color: #3A87FF;
                background-color: transparent;
            }
        }

        span {
            color: #333;
        }
    }
}
.ant-typography{
    color: #333;
}

/* header头 */
.ant-layout-header {
    display: flex;
    border-block-end:0px solid rgba(5, 5, 5, 0.06)!important;
    box-shadow: 0px 4px 8px 0px rgba(219, 227, 239,0.25);
    .header-layout-wrapper {
        width: 100%;
        min-width: 1240px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;

        .header-left {
            img {
                width: 28px;
                height: 28px;
                margin-right: 16px;
            }

            color: #000000;
            font-weight: bold;
            font-size: 18px;
        }

        .header-right {
            display: flex;
            align-items: center;
            cursor: pointer;
            .notice-wrapper{
                position: relative;
                margin: 0 30px;
                width: 16px;
                height: 16px;
                .notice {
                    width: 14px;
                    height: 14px;
                    object-fit: contain;
                    display: block;
                }
                .flag{
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    border: 1px solid #fff;
                    background-color: #D9001B;
                    position: absolute;
                    right: 2px;
                    top: 0;
                    z-index: 2;
                }
    
            }
            
            .username-wrapper {
                display: flex;
                align-items: center;

                svg {
                    width: 12px;
                    height: 12px;
                    color: #666;
                    margin-left: 10px;
                }
            }
            .screen-box{
                width: 30px;
                height: 30px;
                object-fit: contain;
                margin-right: 20px;
                cursor: pointer;
            }
        }
    }
}

// Dropdown悬浮框样式
.ant-dropdown {
    .ant-dropdown-menu {
        padding: 0;
        min-width: 106px;
        box-shadow: 0px 8px 16px 0px rgba(147, 189, 255, 0.3);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E3E6E7;

        .ant-dropdown-menu-item {
            padding: 10px 16px;

            &:hover {
                background-color: #F3F8FF;
                color: #3A87FF;
            }
        }

        .ant-dropdown-menu-title-content {
            line-height: normal;
            color: #666;
        }
    }

    .ant-dropdown-menu-item {
        text-align: center;
    }

    .ant-dropdown-arrow {
        top: 1px;

        &::before {
            background: transparent;
        }

        &::after {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border: 1px solid #E3E6E7;
            box-shadow: none;
        }
    }

}

//  form表单基础设置
.ant-form-item {
    margin-bottom: 16px;

    .ant-form-item-label>label {
        font-size: 1rem;
        font-weight: 400;
        color: #666666;
    }

    // 下拉选择框
    .ant-select-single {
        height: 36px !important;
    }

    .ant-select {
        .ant-select-selector {
            border-color: #E3E6E7 !important;
            box-shadow: none !important;
            padding: 0 10px !important;
            border-radius: 4px !important;
            height: 36px !important;
            padding-block: 0;
            font-size: 14px;
            .ant-select-selection-search-input {
                height: 34px !important;
            }
        }

        .ant-select-item-option-selected {
            background-color: #F3F8FF !important;
        }
        &.ant-select-status-error{
            .ant-select-selector {
                border-color: #ff4d4f!important;
            }  
        }
    }
    .ant-select-multiple{
        .ant-select-selector {
            height: auto!important;
        }
    }

    // 多选下拉框
    .ant-select-selection-overflow {
        .ant-select-selection-overflow-item {
            .ant-select-selection-item {
                border-radius: 4px;
                background: #F3F8FF;
                height: 24px;
                color: #3A87FF;
                border: 1px solid #3A87FF;
                padding: 2px 10px;
                line-height: normal;
                .ant-select-selection-search-input {
                    height: 34px !important;
                }
            }

            .ant-select-selection-item-remove {
                color: #3A87FF;
            }
        }
    }

    // input
    .ant-input-affix-wrapper:focus,
    .ant-input-affix-wrapper:focus-within {
        box-shadow: none;
    }

    .ant-input-affix-wrapper {
        border-color: #E3E6E7;
        border-radius: 4px;
        min-height: 36px;
        padding: 0 10px;

        textarea {
            padding: 4px 0;
            resize: none;
        }
        .ant-input-suffix{
            color: #CCCCCC;
        }
    }

    // textarea的文字计数渲染
    .ant-input-textarea-show-count {
        .ant-input-data-count {
            right: 4px;
            bottom: 4px;
            color: #CCCCCC;
        }
    }

    .ant-input-show-count-suffix {
        color: #CCCCCC;
    }

    .ant-form-item-control-input {
        min-height: auto !important;
    }

    // inputnumber
    .ant-input-number {
        border-radius: 4px;
        height: 36px;

        .ant-input-number-input {
            padding: 2px 10px;
            height: 34px;
        }
    }

    // radio横向排版
    .radio-col-wrapper {
        height: 36px;
        display: flex;
        align-items: center;
    }
}

.ant-input-search {
    height: 36px;

    .ant-input {
        border-radius: 4px;
        padding: 2px 10px;
        height: 36px;
        border-color: #E3E6E7;
    }

    .ant-input-group-addon {
        height: 36px;

        .ant-btn {
            height: 36px;
            border-color: #E3E6E7;
            border-start-end-radius: 4px !important;
            border-end-end-radius: 4px !important;
        }
    }
}

// select
.ant-select-dropdown{
    padding: 0;
    border-radius: 4px;
    .ant-select-item {
        padding: 10px 16px;
    }
    .ant-select-item-option{
        border-radius: 0;
    }
    .ant-select-item-option-selected{
        background-color:#F3F8FF!important;
        font-weight: 400!important;
    }
    .ant-cascader-menu{
        padding: 0;
        .ant-cascader-menu-item-active{
            background-color:#F3F8FF!important;
            font-weight: 400!important;
        }
        .ant-cascader-menu-item{
            border-radius: 0;
            .ant-cascader-menu-item-expand-icon{
                margin-right: -6px;
            }
        }
    }
}

// 时间选择
.ant-picker {
    border-color: #E3E6E7 !important;
    height: 36px !important;
    border-radius: 4px;
    width: 100%;
    &:hover {
        border-color: #E3E6E7 !important;
    }

    .ant-picker-active-bar {
        display: none;
    }
    &.ant-picker-status-error {
        border-color: #ff4d4f !important;
    }
}

// 按钮样式调整
.ant-btn {
    border-radius: 4px;

    &:disabled {
        background-color: #CCCCCC;
        color: #fff;
    }
}

.ant-input {
    border-radius: 4px;
}

// antd-table样式
.ant-pro-table {
    &>.ant-pro-card {
        border: none;
        border-radius: 8px;
        padding: 16px 20px;

        .ant-pro-card-body {
            padding: 0;
        }

        .ant-pro-table-list-toolbar-container {
            padding: 0;
        }
    }

    .ant-pro-table-search {
        background-color: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        .ant-pro-query-filter-row{
            margin-left: 0px!important;
            margin-right: 0px!important;
        }
        .ant-pro-query-filter-row-split{
            padding-left:5px!important;
            padding-right:5px!important;
            box-sizing: border-box;
            &:first-child{
                padding-left:0px!important;
            }
        }
        .ant-col{
            &.ant-col-5:nth-last-of-type(1){
                padding-right:0!important;
            }
        }
        
        .ant-btn {
            min-width: 5.7rem;
            min-height: 36px;
        }

        .ant-form-item-label {
            label {
                display: none;
            }
        }

        .ant-space-item>div {
            gap: 10px !important;
        }

        form {
            padding: 0;
        }

        .ant-pro-query-filter-collapse-button {
            color: #333;
            font-size: 1rem;

            // 展开设置
            .anticon-down {
                display: none;
            }
        }
    }

    .ant-pro-table-list-toolbar-title {
        color: #333333;
        font-size: 16px;
        position: relative;
        padding-left: 20px;
        font-weight: bold;

        &::before {
            content: '';
            display: block;
            width: 6px;
            height: 20px;
            background: linear-gradient(180deg, #88DBFF 0%, #3A87FF 100%);
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

    }

    .ant-table-wrapper {
        margin-top: 16px;
    }

    table>thead>tr>th {
        background: #F6F9FE !important;
        border-bottom: 1px solid #EDEDED !important;
        color: #666 !important;
        font-weight: 400!important;
        padding: 0 16px !important;
        height: 48px;

        &::before {
            display: none;
        }
    }

    table>tbody>tr>td {
        color: #333333 !important;
        font-weight: 400;
        padding: 0 16px !important;
        height: 48px;

        &::before {
            display: none;
        }
        &.ant-table-column-sort{
            background: #fff!important;
        }
    }

    table>tbody>tr:hover {
        td {
            background-color: #F9FCFF !important;
        }
    }

    .ant-table-header {
        border-radius: 0 !important;
    }

    table>thead>tr:first-child>*:first-child {
        border-start-start-radius: 0 !important;
    }

    table>thead>tr:first-child>*:last-child {
        border-start-end-radius: 0 !important;
    }

    // 表格操作项
    .ant-table-cell {
        .custom-table-option {
            gap: 16px;
            display: flex;
            a.danger {
                color: #EA4149;
                &:hover{
                    color: #f78b90;
                }
            }
        }
    }

    // 树类型的表格
    &.tree-table-custom {
        table>tbody>tr td {
            .ant-typography {
                width: auto !important;
                padding-left: 6px !important;
            }
        }
    }

    .ant-table-wrapper .ant-table {
        border-radius: 0;
    }
    .ant-table-container{
        border-radius: 0;
    }
   
}
.ant-table-cell-fix-right{
    &.ant-table-cell-scrollbar{
        background: #F6F9FE !important;
    }
}


// 分页修改
.ant-pagination {
    li {
        min-width: auto !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 4px !important;
        border: 1px solid #E3E6E7 !important;
        margin-right: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: normal !important;
        overflow: hidden;

        &:nth-last-child(1) {
            margin-right: 0px !important;
        }

        a {
            width: 100%;
            height: 100%;
            margin: 0 !important;
            padding: 0 !important;
            display: flex!important;
            align-items: center;
            justify-content: center;
        }
        .ant-pagination-item-link{
            border-radius: 4px!important;
        }
        &.ant-pagination-total-text,&.ant-pagination-options {
            width: auto!important;
            border: 0px solid #E3E6E7!important;
        }
    }

    .ant-pagination-item-active {
        background-color: #3A87FF;
        border: 1px solid #3A87FF !important;

        a {
            color: #fff;
        }

        &:hover {
            a {
                color: #fff;
            }
        }
    }
    .ant-pagination-item-container{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ant-pagination-item-ellipsis{
        font-size: 10px;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
    }
}

// tooltip展示
.ant-tooltip {
    .ant-tooltip-inner {
        border: 1px solid #E3E6E7;
        background-color: #fff;
        border-radius: 4px;
        color: #333;
    }

    .ant-tooltip-arrow {

        &::before {
            background: transparent;
        }

        &::after {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border: 1px solid #E3E6E7;
            box-shadow: none;
        }
    }

    &.ant-tooltip-placement-bottomLeft,
    &.ant-tooltip-placement-bottom {
        .ant-tooltip-arrow {
            top: 1px;
        }
    }
}

.ant-tooltip-placement-top {
    .ant-tooltip-arrow {
        bottom: 1px !important;
    }
}

.ant-tooltip-placement-bottom {
    .ant-tooltip-arrow {
        top: 1px !important;
    }
}

// modal样式
.ant-modal {
    .ant-modal-content {
        padding: 16px 0px;
    }
    .ant-modal-header {
        margin: 0 20px 16px;
    }
    .ant-modal-footer {
        padding: 16px 20px 0;
        border-top: 1px solid #E3E6E7;
        margin-top: 0;
        .ant-btn {
            min-width: 5.7rem;
            min-height: 36px;
        }
    }

    .ant-modal-body {
        min-height: 400px;
        max-height: 620px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 20px;
        .ant-radio-group{
            height: 36px;
            display: flex;
            align-items: center;
        }
    }

}

.modal-one-item {
    .ant-modal-body {
        min-height: 120px !important;
    }
}

.modal-confirm-wrapper {
    .modal-confirm-title {
        display: flex;
        align-items: center;

        .confirm-icon {
            display: block;
            font-size: 18px;
            color: #EA4149;
        }

        .confirm-title {
            margin-left: 10px;
            font-size: 16px;
            color: #333333;
            display: block;
        }
    }

    .ant-modal-body {
        padding-bottom: 16px;
        min-height: auto;
    }
}

// 图片类型的上传
.upload-picure-wrapper {
    .ant-upload-list-item-container {
        width: 96px !important;
        height: 96px !important;
    }

    .ant-upload {
        width: 96px !important;
        height: 96px !important;
        border-color: #3A87FF !important;
        border-radius: 4px !important;

        &.ant-upload-select {
            background-color: #fff !important;
        }
    }

    .custom-con-wrapper {
        color: #3A87FF;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: 400;

        svg {
            font-size: 18px;
            margin-bottom: 2px;
        }
    }

    .ant-upload-list-item {
        width: 96px !important;
        height: 96px !important;
        border-radius: 4px !important;
        padding: 0 !important;
        overflow: hidden;

        &::before {
            background-color: yellow;
            width: 96px !important;
            height: 96px !important;
            border-radius: 4px !important;
        }
    }

    // 操作按钮
    .ant-upload-list-item-actions {
        width: 96px;
        height: 96px;
        position: relative;

        // 预览
        a {
            display: inline-block;
            width: 96px !important;
            height: 96px !important;

            .anticon-eye {
                opacity: 0;
            }
        }

        // 删除
        button {
            width: 16px !important;
            height: 16px !important;
            min-height: auto;
            min-width: auto;
            position: absolute;
            right: 4px;
            top: 4px;
            z-index: 2;

            .anticon-delete,
            .ant-btn-icon {
                margin: 0 !important;
                cursor: pointer;
            }
        }
    }

    .ant-upload-list-item-uploading {
        .ant-upload-list-item-progress {
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

// 文件上传样式
.upload-file-wrapper {
    .ant-btn {
        height: 32px;
    }
}

// card定义
.base-card-wrapper {
    box-shadow: none !important;
    overflow: hidden;

    .ant-card-head {
        padding: 16px 40px 0;
        margin: 0 -20px;
        border-bottom: 1px solid #E3E6E7;

        .ant-tabs-nav-wrap {
            border-bottom: none;
        }

        .ant-tabs-tab {
            padding: 0 0 16px;

            .ant-tabs-tab-btn {
                font-size: 16px;
            }
        }

        .ant-tabs-nav::before {
            border-bottom: none;
        }
    }

    .ant-card-body {
        padding: 0 20px;
    }
}

// 全局标签设置
.ant-tag {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background: #F3F8FF;
    line-height: normal;
    font-size: 1rem;
    font-weight: 400;
    color: #3A87FF;
    border-radius: 4px;
    border-color: #3A87FF;
    margin-inline-end: 10px;

    svg {
        color: #3A87FF;
    }
}

// 树节点样式
.ant-tree-list-holder-inner {
    color: #666666;
}

.ant-tree-checkbox-inner {
    border-radius: 2px;
}
// 单选
.ant-radio-wrapper{
    color: #666666;
    &.ant-radio-wrapper-checked {
        color: #3A87FF;
    }
}
// 多选
.ant-checkbox{
    border-radius: 2px!important;
    .ant-checkbox-inner{
        border-radius: 2px!important;
    }
}
.ant-checkbox-wrapper{
    color: #666666;
    &.ant-checkbox-wrapper-checked{
        color: #3A87FF;
    }
}

// 展示类型的table
.show-pro-table {
    .ant-pro-card {
        padding: 0;
    }
    .ant-table-wrapper{
        margin-top: 0;
    }
}
// 表格table样式
.ant-table-bordered{
    .ant-table-container{
        border-top:0px!important;
        border-inline-start:0!important;
    }
    .ant-table-thead{
        tr>th{
            border-top:1px solid #E3E6E7!important;
            border-inline-end:1px solid #E3E6E7!important;
            // border-bottom:1px solid #E3E6E7!important;
            &:first-child{
                border-left:1px solid #E3E6E7!important;
            }
        }
    }
    .ant-table-tbody{
        tr>td{
            border-inline-end:1px solid #E3E6E7!important;
            // border-bottom:1px solid #E3E6E7!important;
            &:first-child{
                border-left:1px solid #E3E6E7!important;
            }
        }
    }
}
// 搜索input
.ant-input-search{
    .ant-btn{
        border-left: none;
    }
}

// 对时间选择框进行重构
.time-picker-custom{
    .ant-picker-input{
        position: relative;
        padding-left: 20px;
        .ant-picker-suffix{
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-inline-start:0;
        }
    }
}
// 对错误验证文案进行验证
.ant-form-item-explain-error{
    font-size: 12px;
    color: #EA4149!important;
}
// 抽屉样式
.ant-drawer-wrapper-body{
    .ant-drawer-header{
        padding: 16px 20px;
    }
    .ant-drawer-body{
        padding: 16px 20px;
    }
}
// 通知提醒框样式
.ant-notification {
    .ant-notification-notice-wrapper .ant-notification-notice{
        padding: 14px 16px;
    }
}
  
// 表单的radio样式调整
.inner-proform-radio{
    .ant-form-item-control-input-content{
        .ant-radio-group{
            display: flex;
            align-items: center;
            height: 34px;
        }
    }
}


// content展示的样式
.ant-pro-page-container-children-container{
    padding-block-end: 16px;
    padding-inline: 20px;
}